<template>
	<view class="zzh-form">
		<view class="login-head">
			<view class="head-img"></view>
		</view>
		<view class="login-body">
			<form class="login-form" @submit="formSubmit">
				<view class="uni-form-item zzh-form-item">
					<input class="item-input" type="number" name="mobile" v-model="loginData.mobile" placeholder="手机号码" placeholder-style="color:#e6e0e0;" maxlength="11" focus/>
				</view>
				<view class="form-code-item">
					<view class="uni-form-item zzh-form-item">
						<input class="item-input" type="number" name="code" v-model="loginData.code" placeholder="验证码" placeholder-style="color:#e6e0e0;" maxlength="6"/>
					</view>
					<button class="code-button" @tap="sendCode(60)" :disabled="codeButDisabled">{{codeText}}</button>
				</view>
				<view class="uni-form-item zzh-form-item">
					<input class="item-input" type="text" name="password" v-model="loginData.password" password placeholder="新密码" placeholder-style="color:#e6e0e0;" maxlength="20"/>
				</view>
				<view class="uni-form-item zzh-form-item">
					<input class="item-input" type="text" name="rePassword" v-model="loginData.rePassword" password placeholder="确认密码" placeholder-style="color:#e6e0e0;" maxlength="20"/>
				</view>
				<view class="uni-form-item item-button">
					<button formType="submit" class="login-button" :disabled="submitButDisabled">提交</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	var  graceChecker = require("common/js/graceChecker.js");
	export default {
		data() {
			return {
				codeRule: [
					{name:"mobile", checkType : "notnull", checkRule:"",  errorMsg:"手机号码不能为空"},
					{name:"mobile", checkType : "phoneno", checkRule:"",  errorMsg:"请输入正确的手机号码"}
				],
				loginData:{
					mobile:"",
					code:"",
					reCode:"",
					password:"",
					rePassword:""
				},
				codeButDisabled:false,
				submitButDisabled:false,
				codeText:"获取验证码"
			};
		},
		components: {
		},
		methods:{
			/**
			 * 获取短信验证码
			 */
			sendCode: function(t){
				let that = this;
				let checkRes = graceChecker.check(that.loginData, that.codeRule);
				if(checkRes){
					that.codeButDisabled = true;
 					that.$http.ajax({
						url:that.$http.adornUrl(that.$api.sendCode),
						data:{
							phone:that.loginData.mobile,
							type:"findPassword"
						},
						showLoad:true,
						showMsg:true
					}).then(function(data){
						that.codeText = t + "(s)";
						let i = setInterval(function(){
						  if(t > 0) {
							that.codeText = (--t) + "(s)";
						  } else {
							window.clearInterval(i);
							that.codeText = "获取验证码";
							that.codeButDisabled = false;
						  }
						}, 1500);
						if(data.code == 0){
							that.loginData.reCode = data.data;
						}
					}).catch(function(err){that.codeButDisabled = false;})
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			},
			
			/**
			 * 表单提交
			 */
			formSubmit: function(e){
				//进行表单检查
				let that = this;
				let rule = [
								{name:"mobile", checkType : "notnull", checkRule:"",  errorMsg:"手机号码不能为空"},
								{name:"mobile", checkType : "phoneno", checkRule:"",  errorMsg:"请输入正确的手机号码"},
								{name:"code", checkType : "notnull", checkRule:"",  errorMsg:"验证码不能为空"},
								{name:"code", checkType : "same", checkRule:that.loginData.reCode, errorMsg:"验证码错误"},
								{name:"password", checkType : "notnull", checkRule:"",  errorMsg:"密码不能为空"},
								{name:"password", checkType : "reg", checkRule:"^[^ ]+$",  errorMsg:"密码不能含有空格"},
								{name:"password", checkType : "string", checkRule:"6,",  errorMsg:"密码至少需要6位字符"},
								{name:"rePassword", checkType : "same", checkRule:that.loginData.password,  errorMsg:"两次输入密码需一致"},
							];
				let formData = e.detail.value;
				let checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					that.submitButDisabled = true;
 					that.$http.ajax({
						url:that.$http.adornUrl(that.$api.findPassword),
						data:formData,
						method:"POST",
						showLoad:true,
						showMsg:true
					}).then(function(data){
						if(data.code == 0){
							setTimeout(function(){
								uni.navigateBack({delta: 1});
							},1500)
						}else{
							that.submitButDisabled = false;
						}
					}).catch(function(err){that.submitButDisabled = false;})
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "common/css/login.scss";
	.zzh-form {
		.login-head{
			.head-img{
				margin-top:60upx;
			}
		}
	}
</style>
